<html>
    <head>
        <title>Leaflet Map</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet.js"></script>
        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body onload="init()">
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>

<script type="text/javascript">
    // 1. 定义全局地图变量map
    var map = null; 

    // 2.定义onload函数
    function init(){

        // 3. 创建地图对象
        map = L.map("mapDiv")       //创建地图对象map，参数是容器DIV的ID
               .setView([0,0], 1);  //设置地图的坐标原点是(0,0),显示级别是1    

        // 4. 创建瓦片图层对象，并添加到地图上
        L.tileLayer(                //创建瓦片图层对象
            'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        ).addTo(map);               //将瓦片图层对象添加到地图上
    }
</script>
    


